import styled from "@emotion/styled";
import { ProjectListScreen } from "../src/screens/project-list";
import { ProjectScreen } from "screens/project";
import { useAuth } from "context/auth-context";
import { Row } from "components/lib";
import { ReactComponent as SoftwareLogo } from "assets/software-logo.svg";
import { Button, Dropdown, Menu } from "antd";
import { Helmet } from "react-helmet";
import { resetRoute, useDocumentTitle } from "utils";
import { Navigate, Route, Routes } from "react-router";
import { useState } from "react";
import { ProjectModal } from "../src/screens/project-list/project-modal";
import { ProjectPopover } from "components/project-popover";
import { ButtonNoPadding } from "components/lib";

export const AuthenticatedApp = () => {
  const [projectModalOpen, setProjectModalOpen] = useState(false);
  useDocumentTitle("项目列表", false);
  return (
    <Container>
      <PageHeader
        projectButton={
          <ButtonNoPadding
            type="link"
            onClick={() => setProjectModalOpen(true)}
          >
            创建项目
          </ButtonNoPadding>
        }
      />
      <Main>
        <Routes>
          <Route
            path={"/projects"}
            element={
              <ProjectListScreen
                projectButton={
                  <ButtonNoPadding
                    type="link"
                    onClick={() => setProjectModalOpen(true)}
                  >
                    创建项目
                  </ButtonNoPadding>
                }
              />
            }
          ></Route>
          <Route
            path={"/projects/:projectId/*"}
            element={<ProjectScreen />}
          ></Route>
          <Route path={"*"} element={<Navigate to={"/projects"} />} />
        </Routes>
      </Main>
      <ProjectModal
        projectModalOpen={projectModalOpen}
        onClose={() => setProjectModalOpen(false)}
      ></ProjectModal>
    </Container>
  );
};

const PageHeader = (props: { projectButton: JSX.Element }) => {
  return (
    <Header between={true}>
      <HeaderLeft gap={true}>
        <ButtonNoPadding type="link" onClick={resetRoute}>
          <SoftwareLogo width={"18rem"} color={"rgb(38, 132, 255)"} />
        </ButtonNoPadding>
        <ProjectPopover {...props} />
        <span>用户</span>
      </HeaderLeft>
      <HeaderRight>
        <User />
      </HeaderRight>
    </Header>
  );
};

const User = () => {
  const { logout, user } = useAuth();

  return (
    <Dropdown
      overlay={
        <Menu>
          <Menu.Item key={"logout"}>
            <Button type="link" onClick={logout}>
              登出
            </Button>
          </Menu.Item>
        </Menu>
      }
    >
      <Button
        type="link"
        onClick={(e) => e.preventDefault()}
      >{`Hi，${user?.name}`}</Button>
    </Dropdown>
  );
};

const Container = styled.div`
  display: grid;
  grid-template-rows: 6rem 1fr; //header和footer 分别高6rem ，中间填满
  height: 100vh;
`;
const Header = styled(Row)`
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
`;
const HeaderLeft = styled(Row)``;
const HeaderRight = styled.div``;
const Main = styled.main``;
const HeaderItem = styled.h3`
  margin-right: 3rem;
`;
